<template>
  <el-dialog v-model="show" title="选择设备" width="580" align-center>
    <div class="head">
      <div class="btn-all">
        <el-tabs
          @tab-click="handleClick"
          v-model="active"
          type="card"
          class="demo-tabs"
        >
          <el-tab-pane
            :label="v.name"
            :name="v.index"
            v-for="(v, i) of tableList"
            :key="i"
          ></el-tab-pane
        ></el-tabs>
      </div>
      <div class="head-list">
        <div>提已选择<span style="color: #0071bb">1</span>项目</div>
        <div class="btn">
          <el-input
            v-model="seachDetails"
            placeholder="请输入搜索条件"
            class="mr-6"
          >
          </el-input>
          <el-button round color="#0071bb">导出</el-button>
        </div>
      </div>
      <div class="tables">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="order" label="激活时间" />
          <el-table-column prop="content" label="设备名称" />
          <el-table-column prop="money" label="设备编号" />
          <el-table-column prop="date" label="生产编号" />
        </el-table>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          round
          type="primary"
          @click="submit(ruleFormRef)"
          color="#0071bb"
          >确定</el-button
        >
        <el-button round @click="close()">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { FormInstance,TabsPaneContext } from "element-plus";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { defineProps, defineEmits, toRefs } from "vue";
const emit = defineEmits(["close", "submit"]);
const active = ref("1");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const tableList = ref([
  {
    name: "全部设备",
    index: "1",
  },
  {
    name: "未绑定设备",
    index: "2",
  },
]);
const seachDetails = ref("");
// 取消
const close = () => {
  emit("close");
};
// 确定
const submit = () => {
  emit("submit");
};
const tableData = [
  {
    order: "小张",
    content: "超级管理员",
    money: "12.00",
    date: "1.00",
  },
];
const show = ref<boolean>(true);
</script>

<style lang="scss" scoped>
.df {
  display: flex;
  align-items: center;
}
.fd {
  font-weight: bold;
}
.head-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0px;
}
:deep() {
  th {
    background: rgb(241, 241, 241) !important;
    color: #4d4d4d !important;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    width: 100% !important;
  }
  .el-tabs__item {
    // width: 33% !important;
    margin-right: 10px;
  }

  .el-tabs__nav {
    .is-top {
      border: 1px solid #cccccc !important;
    }
    .is-active {
      color: #0071bb !important;
      border: 1px solid #0071bb !important;
    }
  }

  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none !important;
  }
  .el-tabs--card > .el-tabs__header {
    border: none !important;
  }
}

.btn {
  display: flex;
  align-items: center;
  justify-content: end;
}
.mr-6 {
  margin-right: 6px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 20px;
  font-size: 14px;
}
</style>
